vue事件中的$event对象

一般会在两种情况下使用$event参数。

一、DOM事件回调

v-on指令监听dom事件的时候不需要写$event，回调函数会默认接收该参数。（形参不一定要写e，写什么都可以）

如果sliderMove传了指定的参数a，那么就会接收a。

如果既想接收事件对象，又想接收a，要写成@mousedown="sliderMove($event, a)"。

<template>
  <div ref="bar" :style="barCSS" class="bar" @mousedown="sliderMove"></div>
</template>
<script>
 
export default {
  methods: {
    sliderMove(e) {
      console.log(e);
    }
  }
};
</script>

二、子组件向父组件传值

一般父子组件是这样传参的

//child.vue
editPicture(task) {
    this.$emit('showEditModal', task);
}

// parent.vue
<check-card @showEditModal="openEdit"></check-card>
 
openEdit(task) {
    console.log(task); // task
}

如果想在openEdit传parent自己参数，就需要写成这样

// parent.vue
<check-card @showEditModal="openEdit($event, index)"></check-card>
 
openEdit(task, index) {
    console.log(task, index); // task, index
}

如果子组件不止传一个参数呢？$event只能收到第一个参数task。

// child.vue
editPicture(task, picindex) {
    this.$emit('showEditModal', task, picindex);
}

// parent.vue
<check-card @showEditModal="openEdit($event, index)"></check-card>
 
openEdit(e, index) {
    console.log(e, index);  // task, index
}

想要在父组件传自己参数的情况下，接收多个子组件的参数，需要将子组件的参数变为对象。

// child.vue
editPicture(task, picindex) {
    this.$emit('showEditModal', { task, picindex });
}

// parent.vue
<check-card @showEditModal="openEdit($event, index)"></check-card>
 
openEdit(e, index) {
    console.log(e, index);  // { task, picindex }, index
}